<template>
	<view class="post-list">
		<uni-section title="为你推荐" type="line">
			<!-- 使用 WaterfallList 组件替代原有的瀑布流实现 -->
			<WaterfallList :posts="postList" :item-width="itemWidth" @post-click="handlePostClick" />

			<view class="loading-text" v-if="postList.length > 0">
				{{ isLoading ? '正在加载...' : (hasMore ? '上拉加载更多' : '没有更多数据~') }}
			</view>
			<view class="empty-state" v-else-if="!isLoading">
				<text>暂无帖子数据</text>
			</view>
		</uni-section>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch } from 'vue'
	import { listPost } from '@/api/post/post'
	import { usePostStore } from '@/store/modules/post'
	import WaterfallList from '@/components/post/WaterfallList.vue'
	import type { PostBasicInfo } from '@/api/post/post'

	// 使用 Pinia store
	const postStore = usePostStore()

	// 是否正在加载更多
	const isLoading = ref(false)
	// 是否还有更多数据
	const hasMore = ref(true)

	// 帖子列表 - 改为使用 PostBasicInfo 类型
	const postList = ref<PostBasicInfo[]>([])

	// 瀑布流项目宽度
	const itemWidth = ref(150)

	const queryParams = ref({
		pageNum: 1,
		pageSize: 10
	})

	// 处理图片数据 - 适配新的字段结构
	const processPostImages = (postData : any) : string => {
		// 1. 优先使用封面图
		if (postData.coverImage && postData.coverImage.trim()) {
			return postData.coverImage
		}

		// 2. 处理postImages字段
		if (postData.postImages && postData.postImages.trim()) {
			try {
				const postImagesArray = JSON.parse(postData.postImages)
				if (Array.isArray(postImagesArray) && postImagesArray.length > 0) {
					// 按order排序并获取第一张图片
					const sortedImages = postImagesArray
						.filter(img => img.url && img.url.trim())
						.sort((a, b) => (a.order || 0) - (b.order || 0))

					if (sortedImages.length > 0) {
						return sortedImages[0].url
					}
				}
			} catch (error) {
				console.error('解析postImages失败:', error)
			}
		}
	}

	// 获取帖子列表
	const getPostList = async (isLoadMore = false) => {
		if (isLoading.value) return

		isLoading.value = true

		try {
			// 始终进行全量查询，不再根据circleId筛选
			const res = await listPost(queryParams.value)

			if (res && res.rows) {
				// 处理返回的数据，转换为 PostBasicInfo 格式
				const newData : PostBasicInfo[] = res.rows.map((item : any) => {
					const postId = Number(item.id)
					const isLiked = postStore.isPostLiked(postId)

					return {
						id: postId,
						postCode: item.postCode || '',
						circleId: item.circleId || 0,
						authorUserId: item.authorUserId || 0,
						postTitle: item.postTitle || '无标题',
						postContent: item.postContent || '',
						postImages: item.postImages || '',
						coverImage: item.coverImage || '',
						likeCount: item.likeCount || 0,
						commentCount: item.commentCount || 0,
						favoriteCount: item.favoriteCount || 0,
						isDraft: item.isDraft || 0,
						aiAuditStatus: item.aiAuditStatus || 0,
						aiAuditReason: item.aiAuditReason || '',
						aiAuditTime: item.aiAuditTime || '',
						createdBy: item.createdBy || '匿名用户',
						createdTime: item.createdTime || '',
						updatedBy: item.updatedBy || '',
						updatedTime: item.updatedTime || '',
						deletedFlag: item.deletedFlag || 0,
						// 为了兼容 PostItem 组件，添加图片处理
						picture: processPostImages(item),
						isLiked: isLiked
					} as PostBasicInfo & { picture : string; isLiked : boolean }
				})

				if (isLoadMore) {
					// 加载更多时进行去重处理
					const existingIds = new Set(postList.value.map(post => post.id))
					const uniqueNewData = newData.filter(post => !existingIds.has(post.id))

					if (uniqueNewData.length > 0) {
						postList.value.push(...uniqueNewData)
					} else {
						// 如果没有新的唯一数据，说明数据重复了
						console.warn('检测到重复数据，停止加载更多')
						hasMore.value = false
						return
					}
				} else {
					// 首次加载
					postList.value = newData
				}

				// 使用 total 字段进行精确的分页控制
				if (res.total !== undefined) {
					// 基于总数的精确判断
					hasMore.value = postList.value.length < res.total

					// 额外的安全检查：如果当前页返回的数据量小于页面大小，也说明到底了
					if (res.rows.length < queryParams.value.pageSize) {
						hasMore.value = false
					}
				} else {
					// 如果没有 total 字段，回退到原有逻辑
					hasMore.value = res.rows.length === queryParams.value.pageSize
				}
			} else {
				hasMore.value = false
			}
		} catch (error) {
			console.error('获取帖子列表失败：', error)
			uni.showToast({
				title: '加载失败',
				icon: 'error'
			})
		} finally {
			isLoading.value = false
		}
	}

	// 处理帖子点击事件
	const handlePostClick = (post : PostBasicInfo) => {
		uni.navigateTo({
			url: `/pages/post/postDetail?id=${post.id}`
		})
	}

	// 更新帖子的点赞状态
	const updatePostLikedStatus = () => {
		postList.value.forEach((post : any) => {
			const wasLiked = post.isLiked
			const isNowLiked = postStore.isPostLiked(post.id)

			// 更新点赞状态
			post.isLiked = isNowLiked

			// 同步更新点赞数
			if (wasLiked !== isNowLiked) {
				if (isNowLiked) {
					// 从未点赞变为已点赞
					post.likeCount++
				} else {
					// 从已点赞变为未点赞
					post.likeCount = Math.max(0, post.likeCount - 1)
				}
			}
		})
	}

	// 监听store中的点赞状态变化
	watch(() => postStore.userLikedPostIds, () => {
		updatePostLikedStatus()
	}, { deep: true })

	// 加载更多数据的方法
	const loadMore = async () => {
		if (isLoading.value) {
			return // 正在加载中，直接返回
		}

		if (!hasMore.value) {
			uni.showToast({ icon: 'none', title: '没有更多数据~' })
			return
		}

		// 记录加载前的数据量，用于检测是否真的加载了新数据
		const beforeCount = postList.value.length

		queryParams.value.pageNum += 1
		await getPostList(true)

		// 检查是否真的加载了新数据
		if (postList.value.length === beforeCount) {
			// 如果数据量没有增加，说明没有新数据或数据重复
			hasMore.value = false
			queryParams.value.pageNum -= 1 // 回退页码
			uni.showToast({ icon: 'none', title: '没有更多数据~' })
		}
	}

	// 刷新数据
	const refresh = async () => {
		queryParams.value.pageNum = 1
		hasMore.value = true
		await getPostList(false)
	}

	// 组件挂载时初始化
	onMounted(async () => {
		// 先获取用户点赞的帖子ID
		await postStore.fetchUserLikedPosts()
		// 再获取帖子列表
		await getPostList()
	})

	// 暴露方法给父组件
	defineExpose({
		loadMore,
		refresh,
		fetchUserLikedPosts: postStore.fetchUserLikedPosts
	})
</script>

<style lang="scss">
	.post-list {
		margin-top: 20rpx;
		// margin-right: 20rpx;
		// margin-left: 20rpx;
		// 添加阴影效果
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	// 加载提示文字
	.loading-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		background-color: #f7f7f7;
		padding: 20rpx 0;
	}

	// 空状态
	.empty-state {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
</style>
